<template>
    <div class="bigwallet">
        <dl class="wallet">
            <dd>
                <NuxtImg src="/img/mylrft.png" alt="" />
                <h3>BRL</h3>
                <span>0.00</span>
                <el-icon class="rotate" @click="banner1 = !banner1" :class="banner1 ? 'acticeRotate' : ''"
                    color="#b5bac8" size="20">
                    <DArrowLeft />
                </el-icon>
                <ol class="context" v-if="banner1">
                    <li><span>{{ $t('language.wallet.money1') }}</span><span>{{ $dot(coininfo['brl']['freezeCoins'])
                            }}</span></li>
                    <li><span>{{ $t('language.wallet.money2') }}</span><span>{{ $dot(coininfo['brl']['withdrawalCoins'])
                            }}</span></li>
                    <li><span>{{ $t('language.wallet.money3') }}</span><span>{{ $dot(coininfo['brl']['bonusCoins'])
                            }}</span></li>
                </ol>
                <div>
                    <el-button @click="openRechange(0)" class="btn">{{ $t('language.wallet.btn1') }}</el-button>
                    <el-button class="btn" @click="openwithdrawal">{{ $t('language.wallet.btn2') }}</el-button>
                </div>
                <div class="process" v-if="banner1">
                    <el-progress :text-inside="true" :stroke-width="15" :percentage="70" />
                    <p>
                        {{ $t('language.wallet.dialogtip') }}
                        <el-icon size="18" @click="centerDialogVisible = true">
                            <QuestionFilled />
                        </el-icon>
                    </p>
                </div>
            </dd>
            <dd>
                <strong>{{ $t('language.wallet.money4') }}</strong>
                <h3>BRL</h3>
                <span>0.00</span>
                <el-icon class="rotate" @click="banner2 = !banner2" :class="banner2 ? 'acticeRotate' : ''"
                    color="#b5bac8" size="20">
                    <DArrowLeft />
                </el-icon>
                <ol class="context" v-if="banner2">
                    <li><span>{{ $t('language.wallet.money4') }}</span><span>{{ $dot(coininfo['brl']['commissionCoins'])
                            }}</span></li>
                </ol>
                <el-button class="btn" @click="initVisible2 = true">{{ $t('language.wallet.btn3') }}</el-button>
                <el-button class="btn" @click="openwithdrawal">{{ $t('language.wallet.btn2') }}</el-button>
            </dd>
            <dd>
                <NuxtImg src="/img/T.png" alt="" />
                <h3>USDT</h3>
                <span>0.00</span>
                <el-icon class="rotate" @click="banner3 = !banner3" :class="banner3 ? 'acticeRotate' : ''"
                    color="#b5bac8" size="20">
                    <DArrowLeft />
                </el-icon>
                <ol class="context" v-if="banner3">
                    <li><span>{{ $t('language.wallet.money1') }}</span><span>{{
                    $dot(coininfo['usdt']['freezeCoins']) }}</span></li>
                    <li><span>{{ $t('language.wallet.money2') }}</span><span>{{
                    $dot(coininfo['usdt']['withdrawalCoins']) }}</span></li>
                </ol>
                <div>
                    <el-button class="btn" @click="openRechange(1)">{{ $t('language.wallet.btn1') }}</el-button>
                    <el-button class="btn" @click="openwithdrawal">{{ $t('language.wallet.btn2') }}</el-button>
                </div>
                <div class="process" v-if="banner3">
                    <el-progress :text-inside="true" :stroke-width="15" :percentage="70" />
                    <p>
                        {{ $t('language.wallet.dialogtip') }}
                        <el-icon size="18" @click="centerDialogVisible = true">
                            <QuestionFilled />
                        </el-icon>
                    </p>
                </div>
            </dd>
        </dl>
        <div class="tips">
            <el-dialog v-model="centerDialogVisible" :show-close="false" class="tipDialog" width="500px">
                <div class="context">
                    <h3>{{ $t('language.wallet.dialogtitle') }}</h3>
                    <span class="dear">{{ $t('language.wallet.dialogrule') }}</span>
                    <p>{{ $t('language.wallet.dialogtext') }}</p>
                    <el-button @click="centerDialogVisible = false">{{ $t('language.wallet.close')
                        }}</el-button>
                </div>
            </el-dialog>
        </div>
        <el-dialog class="walletdialog" width="480px" v-model="initVisible2" align-center>
            <!-- <div class="closer" >
        <span @click="initVisible2 = false">
          <el-icon color="#b5b6c8" size="16">
            <CloseBold />
          </el-icon>
        </span>
      </div> -->
            <p>{{ $t('language.wallet.dialogtip') }}</p>
            <div>
                <el-button @click="initVisible2 = false">{{
                    $t("language.wallet.close")
                }}</el-button>
                <el-button style="background: #0a906c;color: #fff;" @click="getmoney">{{
                    $t("language.wallet.sure")
                    }}</el-button>
            </div>
        </el-dialog>
    </div>

</template>

<script setup lang="ts">
import { ref ,shallowRef} from "vue"
import { DArrowLeft, QuestionFilled } from '@element-plus/icons-vue'
import { ElProgress } from 'element-plus'
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const store = useStore();
// 获取用户信息
let userinfo = computed(() => store.userinfo)
let coininfo = computed(() => store.coininfo)
let cointype = computed(() => store.cointype)
let initVisible2 = ref(false)

//打开充值界面

let openRechange = (index: number) => {
    store.$patch({ rechange: true })
    store.$patch({ rechangeType: index })
    store.$patch({ isRecord: 0 })
}
//打开提现界面
let openwithdrawal = () => {
    store.$patch({ withdrawal: true })
}
//佣金提现
let getmoney = () => {
    initVisible2.value = false
    useHttpPOST(`/Payment/v1.0/User/CommissionTransfer`, { id: userinfo.value.gameID }).then(({ data }) => {
        // 获取用户信息
        ElMessage({
            message: t("language.commontips.rechangetips"),
            duration: 1000,
            type: "success",
        });
    });
}
// 箭头旋转
let banner1 = shallowRef<boolean>(false)
let banner2 = shallowRef<boolean>(false)
let banner3 = shallowRef<boolean>(false)
//弹窗
let centerDialogVisible = shallowRef<boolean>(false)
</script>
<style lang="scss">
.walletdialog {
    background: #32353e;
    border-radius: 12px;

    .el-dialog__body {
        p {
            font-size: 14px;
            color: #b5bac8;
            word-spacing: 2px;
            margin-top: 30px;
            line-height: 24px;
        }

        div {
            @include flex(row, flex-end, center);
        }

        .el-button {
            border: 1px solid #0a906c;
            background: transparent;
            color: #0a906c;
            height: 32px;
            line-height: 32px;
            border-radius: 5px;
            font-size: 12px;
            margin: 20px 0 0 10px;
        }
    }





}

.tips {
    .el-dialog__header {
        padding: 0;
    }

    .context {
        @include flex(column, flex-start, center);
        padding: 20px 0 20px 0;

        h3 {

            text-align: center;
            font-size: 30px;
            margin-bottom: 20px;
            color: #fff;

        }

        .dear {
            width: 100%;
            display: block;
            margin-bottom: 10px;
            font-size: 17px;
            text-align: left;
            color: #b5bac8;
            border: none;

        }

        .el-button {
            display: block;
            background-color: #0a906c;
            border-radius: 20px;
            width: 70%;
            font-size: 14px;
            margin-top: 20px;
            color: #b5bac8;
            height: 40px;

        }

        p {
            font-size: 14px;
            word-break: break-all;
            color: #b5bac8;
            line-height: 28px;
        }
    }

    .el-dialog__title {
        color: #fff !important;
        text-align: left !important;
    }

    .el-dialog {
        padding: 20px !important;
        background-color: rgb(50, 53, 62) !important;
        --el-dialog-bg-color: rgb(50, 53, 62) !important;
        border-radius: 15px;
    }
}
</style>
<style scoped lang="scss">
.bigwallet {
    width: 100%;
    height: 100%;

    .wallet {
        width: 100%;
        height: 100%;
        @include flex(row, flex-start, flex-start);

        dd+dd {
            margin-left: 30px;
        }

        dd {
            width: 25%;
            @include flex(column, flex-start, center);
            background: #1a1a1a;
            padding: 0 15px;
            border-radius: 10px;
            padding: 10px 20px 20px;

            .context {
                margin-bottom: 15px;
                width: 100%;

                li {
                    width: 100%;
                    @include flex(row, space-between, center);

                    span {
                        color: #b5bac8;
                        font-weight: normal;
                        font-size: 12px;
                    }
                }

            }



            .rotate {
                transform: rotate(-90deg);
                display: block;
                margin: 10px 0 20px;
                transition: all 0.2s;
                cursor: pointer;
            }

            .acticeRotate {
                transform: rotate(-270deg);
            }

            img {
                width: 46px;

            }

            .process {
                width: 100%;
                padding-top: 10px;

                :deep(.el-progress-bar__inner) {
                    background-color: #0a906c;
                }

                :deep(.el-progress-bar__innerText) {
                    height: 15px;
                }

                p {
                    font-size: 12px;
                    color: #b5bac8;
                    position: relative;

                    .el-icon {
                        position: absolute;
                        right: 0;
                        cursor: pointer;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                }
            }

            strong {
                height: 46px;
                line-height: 46px;
                color: #b5bac8;

                font-size: 22px;
                font-weight: normal;
            }

            h3 {
                font-size: 20px;
                color: #fff;
            }

            >span {
                font-size: 20px;
                color: #fff;
                font-weight: bold;

            }

            .btn {
                color: #fff;
                background-color: #0a906c;
                margin: 0;
                width: 100%;
                height: 40px;
                border: 1px solid #0a906c;
                font-size: 14px;
                border-radius: 8px;
            }

            .btn+.btn {
                background-color: transparent;
                border: 1px solid #0a906c;
                color: #0a906c;
                margin-top: 10px;
            }
        }

    }
}
</style>